<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.插值与指令</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <!-- Vue的模板中有两大类语法，分别是：插值、指令 -->

      <!-- 插值语法专门用于：在标签体指定位置插入一个值 -->
      <h1>插值语法</h1>
      <h3>{{school}}欢迎各位！</h3>
      <hr>

      <!-- 指令语法专门用于： -->
      <h1>指令语法</h1>
      <a v-bind:href="url" a="url" v-bind:b="url" c="1+1" v-bind:d="1+1" e="url.toUpperCase()" v-bind:f="url.toUpperCase()">点我去学习</a>

    </div>

    <script type="text/javascript">
     new Vue({
      el:'#demo',
      data:{
        school:'atguigu',
        url:'http://www.atguigu.com'
      }
     })
    </script>
  </body>
</html>